<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>诊断结果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="{{asset('ExternalJs/echarts.min.js')}}"></script>
</head>
<body>
<style>
    *{
        margin:0;
        padding:0;
        -webkit-text-size-adjust:100%;
    }
    html{
        font-size:62.5%;
    }
    #main{
        width:100%;
        height:250px;
        box-sizing: border-box;
        margin:0 auto;
        overflow: hidden;
    }
    #text{
        padding:20px 2.67% 0;
    }
    #text p:first-child{
        background-color:#3fcfbc;
        line-height:22px;
        padding:2px 1.5%;
        width:25%;
        text-align:center;
        color:#FFFFFF;
        font-weight: 600;
        font-family:"microsoft yahei";
        letter-spacing: 0.2em;
        font-size:1.5rem;
    }
    #text p:last-child{
        line-height:24px;
        font-size:1.4rem;
        margin-top:10px;
        padding-bottom:20px;
    }
    #text section:first-child p:last-child{
        border-bottom:1px dotted #6cdacc;
    }
    #text section:nth-child(2) p:first-child{
        margin-top:35px;
    }
    img{
        width:55.2%;
        display:block;
        margin:10px auto 30px;
    }
</style>
<div id="main"></div>
<div id="text">
    <section>
        <p>综合分析</p>
        <p>产后脱发常发生在产后2～7个月之间。其脱落的特征是自发际线处脱发，使前发际线后退或界线不清，整体头部的头发变稀，医学上称这种现象为“分娩性脱发”。</p>
    </section>
    <section>
        <p>治疗浅析</p>
        <p>产后脱发常发生在产后2～7个月之间。其脱落的特征是自发际线处脱发，使前发际线后退或界线不清，整体头部的头发变稀，医学上称这种现象为“分娩性脱发”。</p>
    </section>
    <img src="{{asset('images/button_question.png')}}">
</div>
<script>
    console.log(eval('<?php echo $point;?>'));
    console.log(eval('<?php echo $level;?>'));
    var array = eval('<?php echo $point;?>');//预设病情数据
    var level = '<?php echo $level;?>'; //问题等级
    var color = '';//预设色值
    var color1 = 'rgba(63, 207, 188, 0.6)';//预设色值1
    var color2 = 'rgba(203, 235, 92, 0.6)';//预设色值2
    var color3 = 'rgba(255, 120, 0, 0.6)';//预设色值3
    var color4 = 'rgba(255, 0, 0, 0.6)';//预设色值4
//    计算病情等级
    var arraySum = 0;
    for(var i=0;i<array.length;i++){
        arraySum = arraySum+array[i];
    };
//    颜色赋值
    if(arraySum>=5&&arraySum<=8){
        color = color1;
    }else if(arraySum>=9&&arraySum<=12){
        color = color2;
    }else if(arraySum>=13&&arraySum<=16){
        color = color3;
    }else if(arraySum>=17&&arraySum<=20){
        color = color4;
    }
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        radar: [
            {
                indicator: [
                    { text: '秃顶率', max: 4 },
                    { text: '费用', max: 4 },
                    { text: '治疗紧迫性', max: 4 },
                    { text: '治疗周期', max: 4 },
                    { text: '恢复难度', max: 4 },

                ],
                center: ['50%', '60%'],
                radius: 90,
                splitNumber: 4,
                name: {
                    textStyle: {
                        color:'#000000',
                        fontSize:13
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: [
                            '#d6f5f1', '#dff7f4',
                            '#e9f9f7', '#f4fcfb']

                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(63, 207, 188, 0.5)',
                        type: 'dotted',
                        width:2
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(63, 207, 188, 0.5)',
                        type: 'dotted',
                        width:2
                    }
                }
            }
        ],
        series: [
            {
                name: '头发调查报告',
                type: 'radar',
                radarIndex: 0,
                data: [
                    {
                        value: array,
                        name: '调查人员',
                        symbol: 'rect',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                type: 'solid',
                                width:0
                            }
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.9,
                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                    {
                                        color: color,
                                        offset: 0
                                    },
                                    {
                                        color: color,
                                        offset: 1
                                    }
                                ])
                            }
                        }
                    }
                ]
            }
        ]
    }
    myChart.setOption(option);
    window.onresize = myChart.resize;
</script>
</body>
</html>